<template>
  <div style="margin-top:-18px">
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline" class="formModel" style="margin:20px 0 0 20px">
          <a-row :gutter="48">
            <a-col :md="4" :sm="24">
              <a-form-item label="项目名称">
                <a-input v-model="queryParam.projectName" placeholder="" />
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <a-form-item label="区县">
                <a-input v-model="queryParam.country" placeholder="" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="日期">
                <a-range-picker :ranges="{ Today: [moment(), moment()], 'This Month': [moment(), moment().endOf('month')] }" v-model="selectTime" @change="onChange" class="rangePicker" />
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <a-form-item label="资源类型">
                <a-select v-model="queryParam.type" placeholder="请选择资源类型">
                  <a-select-option :value="1">标准视频</a-select-option>
                  <a-select-option :value="2">平安福州</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <span>
                <a-button type="primary" @click="selectEvent">查询</a-button>
                <a-button type="primary" style="margin-left:8px" @click="daochu">excel导出</a-button>
              </span>
            </a-col>

          </a-row>
        </a-form>
      </div>

      <a-table :pagination="false" style="margin:0px 20px 20px 20px" :columns="columnstable" :data-source="data" :loading="tableLoading" bordered size="middle" />

    </a-card>
  </div>
</template>

<script>
import moment from 'moment'
import { getNowTime, getNowFormatDate } from '@/utils/util.js'
import { getSafeVideoTotal,exportExcelVideo,exportExcelMonitor} from '@/api/video'
const data = []
export default {
  components: {},
  data() {
    return {
      tableLoading: false,
      startTime: '',
      endTime: '',
      selectTime: '',
      columnstable,
      data,
      searchData: [],
      // create model
      visible: false,
      confirmLoading: false,
      mdl: null,
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {
        type: 1,
      },
      // 加载数据方法 必须为 Promise 对象

      selectedRowKeys: [],
      selectedRows: [],
    }
  },
  filters: {},
  created() {
    let nowtime = getNowFormatDate()
    this.selectTime = [moment(nowtime), moment(nowtime)]
    this.queryParam.startTime = nowtime + ' 00:00:00'
    this.queryParam.endTime = nowtime + ' 23:59:59'
  },
  mounted() {
    this.getDataInfoFunction()
  },
  computed: {},
  methods: {
    moment,
    onChange(date, dateString) {
      this.queryParam.startTime = dateString[0] + ' 00:00:00'
      this.queryParam.endTime = dateString[1] + ' 23:59:59'
      this.selectTime = [moment(dateString[0]), moment(dateString[1])]
    },
    selectEvent() {
      this.getDataInfoFunction()
    },
    daochu(){
    this.queryParam.type==1 ? this.downloadVideo() : this.downloadMonitor()    
    },
    downloadVideo(){
      exportExcelVideo(this.queryParam)
        .then((response) => {
          let blob = new Blob([response], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
          let url = window.URL.createObjectURL(blob)
          let aLink = document.createElement('a')
          aLink.style.display = 'none'
          aLink.href = url
          aLink.setAttribute('download', '标准视频.xlsx')
          document.body.appendChild(aLink)
          aLink.click()
          document.body.removeChild(aLink)
          window.URL.revokeObjectURL(url)
          this.$message.success(`文件已导出`)
        })
        .catch((error) => {})
    },
    downloadMonitor(){
      exportExcelMonitor(this.queryParam)
        .then((response) => {
          let blob = new Blob([response], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
          let url = window.URL.createObjectURL(blob)
          let aLink = document.createElement('a')
          aLink.style.display = 'none'
          aLink.href = url
          aLink.setAttribute('download', '平安福州.xlsx')
          document.body.appendChild(aLink)
          aLink.click()
          document.body.removeChild(aLink)
          window.URL.revokeObjectURL(url)
          this.$message.success(`文件已导出`)
        })
        .catch((error) => {})
    },
    //获取表格数据
    getDataInfoFunction() {
      this.tableLoading = true
      getSafeVideoTotal(this.queryParam)
        .then((response) => {
          this.data = this.setTotalEvent(response.data)
          this.tableLoading = false
        })
        .catch((error) => {
          this.tableLoading = false
        })
    },
    //计算合计横向total
    setTotalEvent(arr) {
      let [a, b, c, d, e] = [0, 0, 0, 0, 0]
      for (let arrList of arr) {
        a = a + arrList.indoor
        b = b + arrList.outdoorRoad
        c = c + arrList.outdoorOther
        d = d + arrList.giveAnAlarm
        arrList.total = arrList.indoor + arrList.outdoorRoad + arrList.outdoorOther + arrList.giveAnAlarm
        e = e + arrList.total
      }
      if (arr.length > 0) {
        let object = {}
        object.country = '合计'
        object.indoor = a
        object.outdoorRoad = b
        object.outdoorOther = c
        object.giveAnAlarm = d
        object.total = e
        arr.push(object)
      }

      return arr
    },
    //计算合计竖向total
    //分页
    pageShow(pagination) {
      this.tableLoading = true
      getSafeVideoTotal(pagination.current, pagination.pageSize)
        .then((response) => {
          const pagination = { ...this.pagination }
          pagination.total = response.data.total
          pagination.pageSize = this.pageSize
          this.pagination = pagination
          this.pagination.current = response.data.current
          this.data = response.data.records
          this.tableLoading = false
        })
        .catch((error) => {
          this.tableLoading = false
        })
    },
  },
}
const columnstable = [
  {
    title: '区域',
    dataIndex: 'country',
    width: 100,
    align: 'center',
  },
  {
    title: 'SLA等级',
    dataIndex: 'level',
    width: 100,
    align: 'center',
  },
  {
    title: '室内',
    dataIndex: 'indoor',
    width: 100,
    align: 'center',
  },
  {
    title: '室外道路',
    dataIndex: 'outdoorRoad',
    width: 100,
    align: 'center',
  },
  {
    title: '室外非道路',
    dataIndex: 'outdoorOther',
    width: 100,
    align: 'center',
  },
  {
    title: '一键报警',
    dataIndex: 'giveAnAlarm',
    width: 100,
    align: 'center',
  },
  {
    title: '合计路数',
    dataIndex: 'total',
    width: 100,
    align: 'center',
  },
]
</script>
